<template>
  <div>
  <el-aside>
      <el-menu
        default-active="$route.path"
        :router="true"
        class="el-menu-vertical-demo"
        background-color="#409EFF"
        text-color="#fff"
        active-text-color="#ffd04b"
        @click="goToPage"
        >
        <el-menu-item index="/home">
          <i class="el-icon-menu"></i>
          <span slot="title">主页</span>
        </el-menu-item>

        <el-menu-item index="/salary">
          <i class="el-icon-document"></i>
          <span slot="title">奖金考核</span>
        </el-menu-item>
        <el-submenu index="">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>考核</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/assess">项目考核</el-menu-item>
            <el-menu-item index="/detail">项目结项</el-menu-item>
            <el-menu-item index="/rank">排行</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
  </el-aside>

  </div>
</template>

<script>
export default {
  name: 'Nav',
  data(){
    return {
      isCollapse:false,
      sysname:'OTC系统'
    }
  },
  methods:{
    goToPage(item){
      this.$router.push(item.key)
    },

      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }

  }

}
</script>

<style scoped>

.menu{
  margin-top: 16px;
  color:#FFFFFF;
  text-align: left;
  width: 200px;
  height:100%;
/*  overflow:visible;*/
  overflow:hidden;
}

@import "../../../res/css/index.css";
.el-menu-vertical-demo{
  width:200px;
  overflow:hidden;
}
.el-aside{
  width: 200px!important;
  overflow:hidden;
}

</style>
